<template>
  <div class="app-container my-define-column-content">
    <div class="my-define-dialog-title">
      {{title}}
      <div class="my-define-dialog-title-btn">
        <i @click="doAddColumn()" class="el-icon-plus" style="font-weight: 600;"></i>
        <i @click="cancel(false)" class="saas-iconfont saas-icon-caozuo-quanping-shousuo"></i>
      </div>
    </div>
    <el-scrollbar :style="customeStyle" class="my-form-scrollbar">
      <el-form size="mini" ref="myColumnForm" :model="columnForm.form" label-position="top">
        <div class="my-define-column-left">
          <div style="border-bottom: solid 0.5px #dee0e3;">
            <draggable v-model="columnFinalData" @change="handleDragChange">
              <el-dropdown-item v-if="item.isFixed" v-for="(item, index) in columnFinalData" :key="index"
                style="margin: 5px;">
                <el-row>
                  <el-col :span="19">
                    <svg-icon icon-class="icon-lock" />
                    {{item.label}}
                  </el-col>
                  <el-col :span="5" style="text-align: right;">
                    <el-dropdown trigger="click" :hide-on-click="true">
                      <span class="el-dropdown-link">
                        <!-- <svg-icon icon-class="icon-line-more" /> -->
                        <i class="saas-iconfont saas-icon-gengduo1" style="margin-right: 0px;"></i>
                      </span>
                      <el-dropdown-menu class="column-dropdown-menu" slot="dropdown">
                        <el-dropdown-item class="column-dropdown-item-edit" @click.native="doEditColumn(item)">
                          <svg-icon icon-class="icon-edit" />
                          编辑
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-col>
                </el-row>
              </el-dropdown-item>
            </draggable>
          </div>
          <draggable v-model="columnFinalData" @change="handleDragChange">
            <el-dropdown-item v-if="!item.isFixed" v-for="(item, index) in columnFinalData" :key="index">
              <el-row>
                <el-col :span="19">
                  <svg-icon icon-class="menu-common-2" />
                  {{item.label}}
                </el-col>
                <el-col :span="5"
                  style="text-align: right; display: inline-flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;">
                  <span @click="triggerVisibility(item,index)">
                    <svg-icon v-if="item.visibile" icon-class="menu-eye-open" />
                    <svg-icon v-else icon-class="menu-eye-close" />
                  </span>
                  <el-dropdown trigger="click" :hide-on-click="true">
                    <span class="el-dropdown-link">
                      <!-- <svg-icon icon-class="icon-line-more" /> -->
                      <i class="saas-iconfont saas-icon-gengduo1" style="margin-right: 0px;"></i>
                    </span>
                    <el-dropdown-menu class="column-dropdown-menu" slot="dropdown">
                      <el-dropdown-item class="column-dropdown-item-edit" @click.native="doEditColumn(item)">
                        <svg-icon icon-class="icon-edit" />
                        编辑
                      </el-dropdown-item>
                      <el-dropdown-item>
                        <el-popconfirm confirm-button-text='删除' cancel-button-text='我在想想' title="确认删除？"
                          @confirm="doRemoveColumn(item)">
                          <div class="column-dropdown-remove-div" slot="reference">
                            <svg-icon style="width: 15px;height: 15px;" icon-class="icon-remove" />
                            删除
                          </div>
                        </el-popconfirm>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>
            </el-dropdown-item>
          </draggable>
        </div>
        <div v-if="columnForm.showPop" class="my-define-column-right">
          <div ref="columnFormRef" style="padding: 10px;">
            <el-row>
              <el-col :span="24">
                <el-form-item label="标题">
                  <el-input :disabled="!columnForm.form.canEditLabel" v-model="columnForm.form.label"
                    placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="字段类型">
                  <el-select :disabled="!columnForm.form.canEditType" style="width: 100%;"
                    v-model="columnForm.form.formFieldType" placeholder="请选择">
                    <el-option v-for="item in formFieldTypeData" :key="item.value" :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24" v-if="columnForm.form.canEditType&&columnForm.form.formFieldType==12">
                <el-form-item label="选择关联表">
                  <el-cascader clearable :options="sceneList" :props="{ value: 'id',emitPath: false }"
                    v-model="columnForm.form.relateSceneId" :show-all-levels="true"></el-cascader>
                </el-form-item>
              </el-col>
              <el-col v-if="columnForm.form.canEditType&&columnForm.form.formFieldType==10">
                <el-input size="mini" v-model="columnForm.form.formDataField" style="width: 100%;" placeholder="请输入">
                </el-input>
              </el-col>
              <el-col
                v-if="columnForm.form.canEditType&&(columnForm.form.formFieldType==3||columnForm.form.formFieldType==4||columnForm.form.formFieldType==5)"
                :span="24" style="padding-bottom: 10px;">
                <el-link style="font-size: 14px;padding-bottom: 10px;" @click.native="doAddFormCondition()">
                  <svg-icon icon-class="icon-add" />
                  添加一个选项
                </el-link>
                <el-form-item v-for="(item, index) in columnForm.form.fieldData" :key="index">
                  <el-color-picker class="my-color-picker" v-model="item.bgColor" size="mini"></el-color-picker>
                  <el-input size="mini" v-model="item.value" mini style="width: calc(100% - 50px);" placeholder="请输入">
                  </el-input>
                  <i @click="doRemoveFormCondition(index)" class="el-icon-delete"
                    style="margin: 0 0 0 0px;vertical-align: -2px;"></i>
                </el-form-item>
              </el-col>
              <el-col :span="24" class="checkbox-style">
                <el-form-item label="">
                  <el-checkbox v-model="columnForm.form.fieldRequired">这是一个必填项</el-checkbox>
                </el-form-item>
              </el-col>
              <el-col :span="24" class="checkbox-style">
                <el-form-item label="">
                  <el-checkbox v-model="columnForm.form.isFixed">这是一列固定</el-checkbox>
                </el-form-item>
              </el-col>
              <el-col :span="24" class="checkbox-style">
                <el-form-item label="">
                  <el-checkbox v-model="columnShow.checked">字段描述</el-checkbox>
                </el-form-item>
              </el-col>
              <el-col :span="24" v-if="columnShow.checked">
                <el-form-item>
                  <el-input type="textarea" :rows="2" :disabled="!columnForm.form.canEditLabel"
                    v-model="columnForm.form.fieldRemark" placeholder="请添加字段描述" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item style="text-align: right;">
                  <el-button @click="submitSaveColumn" size="mini" type="primary">保存</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-form>
    </el-scrollbar>
  </div>
</template>

<script>
  import {
    saveScene,
    getScenes
  } from '@/api/system/scene'
  import {
    getColumns,
    saveColumnSort,
    saveFocusData,
    removeFocusData,
    removeFocusCondition,
    saveDefineColumn,
    resetDefineColumn,
    removeDefineColumn
  } from '@/api/system/column'
  import defaultSettings from '@/settings'
  import draggable from "vuedraggable"
  export default {
    name: 'menu-edit-column',
    components: {
      draggable
    },
    props: {
      Id: {
        type: Number,
        default: 0
      },
      sceneType: {
        type: Number,
        default: 0
      },
      title: {
        type: String,
        default: ''
      },
      data: {
        type: Object,
        default: () => ({})
      },
      dataList: {
        type: Array,
        default: () => ([])
      }
    },
    data() {
      return {
        customeStyle: {
          height: (window.innerHeight - 180) + 'px',
          background: "#fff",
        },
        formFieldTypeData: [{
          value: 1,
          label: '文本'
        }, {
          value: 2,
          label: '日期时间'
        }, {
          value: 8,
          label: '日期'
        }, {
          value: 3,
          label: '单选'
        }, {
          value: 4,
          label: '多选'
        }, {
          value: 5,
          label: '复选框'
        }, {
          value: 6,
          label: '多行文本'
        }, {
          value: 9,
          label: '数字'
        }, {
          value: 10,
          label: '智能公式'
        }, {
          value: 11,
          label: '附件'
        }, {
          value: 12,
          label: '关联表'
        }],
        columnForm: {
          showPop: false,
          label: '',
          icon: '',
          form: {}
        },
        columnShow: {
          checked: false,
        },
        columnFinalData: [],
        sceneId: 0,
        defineSceneId: 0,
        sceneList: []
      }
    },
    created() {
      this.sceneId = this.data.sceneId
      this.defineSceneId = this.data.defineSceneId
      this.getColumnData()
      setTimeout(() => {
        this.getSceneList()
      }, 100)
    },
    methods: {
      // 获取列
      getColumnData() {
        getColumns({
          sceneType: this.sceneType,
          sceneId: this.sceneId,
          defineSceneId: this.defineSceneId,
          isSysSetting: 1
        }).then(res => {
          if (res.status) {
            this.columnFinalData = res.outputData.columnList.filter(function(item) {
              return !item.deleted;
            })
          }
        })
      },
      // 获取场景列表
      getSceneList() {
        getScenes({
          sceneType: 0
        }).then(res => {
          if (res.status) {
            this.sceneList = res.outputData.sceneList.filter((item) => {
              return item.visibility
            })
          }
        })
      },
      // 显示、隐藏列
      triggerVisibility(item) {
        var that = this
        item.visibile = !item.visibile
        saveColumnSort({
          sceneType: this.sceneType,
          sceneId: this.sceneId,
          defineSceneId: this.defineSceneId,
          dataItems: JSON.stringify(that.columnFinalData),
          isSysSetting: 1
        }).then(res => {})
      },
      // 列排序拖拽事件触发
      handleDragChange() {
        var that = this
        saveColumnSort({
          sceneType: this.sceneType,
          sceneId: this.sceneId,
          defineSceneId: this.defineSceneId,
          dataItems: JSON.stringify(that.columnFinalData),
          isSysSetting: 1
        }).then(res => {})
      },
      //字段修改
      doEditColumn(item) {
        this.handleDragChange()
        setTimeout(() => {
          this.columnForm.showPop = true
        }, 200)
        // this.addClickEvent()
        this.columnForm.label = '编辑'
        this.columnForm.form = item
      },
      //字段删除
      doRemoveColumn(item) {
        removeDefineColumn({
          columnId: item.columnId,
          defineId: item.defineId,
          defineSceneId: this.defineSceneId
        }).then(res => {
          if (res.status) {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            this.getColumnData()
            this.columnForm.showPop = false
          }
        })
      },
      //字段新增
      doAddColumn() {
        this.handleDragChange()
        // this.addClickEvent()
        this.columnForm.showPop = true
        this.columnForm.label = '新增'
        this.columnForm.form = {
          canEditLabel: true,
          canEditType: true,
          canQuery: true,
          canSort: true,
          deleted: true,
          fieldType: 1,
          formDataField: "",
          formDataFieldType: 0,
          formFieldType: 1,
          id: 0,
          isFixed: false,
          label: "自定义字段" + (this.columnFinalData.length + 1),
          name: "",
          sortIndex: 1,
          visibile: true,
          fieldData: [],
          fieldRequired: false,
          relateSceneIds: []
        }
      },
      //添加一个选项
      doAddFormCondition() {
        this.columnForm.form.fieldData.push({
          value: '',
          label: '',
          bgColor: ''
        })
      },
      //删除选项
      doRemoveFormCondition(index) {
        this.columnForm.form.fieldData.splice(index, 1)
      },
      //保存字段
      submitSaveColumn() {
        if (this.columnForm.form.formFieldType != 10) {
          this.columnForm.form.formDataField = ''
        }
        if (this.columnForm.form.formFieldType == 3 || this.columnForm.form.formFieldType == 4 || this.columnForm.form
          .formFieldType == 5) {
          if (this.columnForm.form.fieldData.length > 0) {
            this.columnForm.form.fieldData.forEach((item) => {
              item.label = item.value
            })
            this.columnForm.form.formDataField = JSON.stringify(this.columnForm.form.fieldData)
          }
        }
        if (this.columnForm.form.formFieldType == 12) {
          if (!this.columnForm.form.relateSceneId) {
            this.$message({
              message: '请选择关联表',
              type: 'warning'
            })
            return
          }
        }
        saveDefineColumn({
          columnData: JSON.stringify(this.columnForm.form),
          sceneId: this.sceneId,
          defineSceneId: this.defineSceneId,
          sceneType: this.sceneType,
          isSysSetting: 1
        }).then(res => {
          if (res.status) {
            this.$message({
              message: this.columnForm.form.defineId > 0 ? '修改成功' : '新增成功',
              type: 'success'
            })
            this.getColumnData()
            this.columnForm.showPop = false
          }
        })
      },
      submitForm() {
        var that = this
        this.cancel(false)
      },
      cancel(reload) {
        this.$$parent(this, "doCloseScene", reload)
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .my-define-column-content {
    .my-define-column-left {
      float: left;
      width: 300px;
    }

    .my-define-column-right {
      float: right;
      width: calc(100% - 310px);
    }
  }
</style>
